<template>
  <div class="user">
    <van-row class="loginBox">
      <van-col span="6">
        <img v-if="userInfo" :src="userInfo.avatar" class="avatarImg" />
        <img v-else src="../assets/img/avatar.png" class="avatarImg" />
        <!-- <div class="avatar"></div> -->
      </van-col>
      <van-col
        @click="userInfo ? '' : showLoginModal(true)"
        class="loginText"
        span="15"
        >{{ userInfo ? userInfo.username : "点击登录" }}</van-col
      >
      <van-col class="loginArrow" span="3" @click="userInfo ? loginOut() : ''"
        ><van-icon :name="userInfo ? 'cross' : 'arrow'"
      /></van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="(item, index) in icon"
        :key="index"
        :icon="item.icon"
        :text="item.name"
      />
    </van-grid>
    <myDialog
      @showLoginModal="showLoginModal"
      @getUserInfo="getUserInfo"
      :isShowLoginModal="isShowLoginModal"
    />
  </div>
</template>

<script>
import myDialog from "@/components/MyDialog.vue";
import { mapMutations } from "vuex";
export default {
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo")) || "";
  },
  data() {
    return {
      userInfo: "",
      isShowLoginModal: false,
      icon: [
        { icon: "label-o", name: "我的订单" },
        { icon: "bill-o", name: "优惠券" },
        { icon: "goods-collect-o", name: "礼品卡" },
        { icon: "location-o", name: "我的收藏" },
        { icon: "flag-o", name: "我的足迹" },
        { icon: "user-o", name: "会员福利" },
        { icon: "aim", name: "地址管理" },
        { icon: "shield-o", name: "账号安全" },
        { icon: "service-o", name: "联系客服" },
        { icon: "question-o", name: "帮助中心" },
        { icon: "chat-o", name: "意见反馈" },
      ],
    };
  },
  methods: {
    ...mapMutations({ isShowDialogChange: "Dialog/isShowDialogChange" }),
    showLoginModal(val) {
      this.isShowLoginModal = val;
    },
    getUserInfo(val) {
      this.userInfo = val;
    },
    //退出登录
    loginOut() {
      this.$dialog
        .confirm({
          message: "确定退出登录吗",
          showConfirmButton: true,
          showCancelButton: true,
        })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("userInfo");
          this.userInfo = "";
          // on confirm
        })
        .catch(() => {
         
        });
    },
  },
  components: {
    myDialog,
  },
};
</script>

<style lang="less" scoped>
.user {
  .loginBox {
    line-height: 0.7rem;

    background-color: #333;
    padding: 0.1rem;
    box-sizing: border-box;
    .avatarImg {
      height: 0.7rem;
      width: 0.7rem;
      border-radius: 100%;
    }
    .loginText {
      font-size: 0.16rem;
      color: white;
    }
    .loginArrow {
      color: white;
      font-size: 0.16rem;
    }
  }
}
</style>
